<template>
	<view class="content">
		<view class="wid100" style="background-color: #37BCC3;height: 100rpx;">
			<view class="wid90 mar hei100 dis disAl disJuB">
				<view class="wid30 dis disAl coFFF fowe600" @click="opte()">
					<view class="mar-right10 foSi30 textCen" style="line-height: 40rpx;">{{city}}</view>
					<uni-icons class="dis" type="down" color="#fff" size="28rpx"></uni-icons>
				</view>
				<view class="hei60 dis disAl disJuC borRad40 bacFFF " style="width: 69%;">
					<input class="wid90 textCen foSi30" v-model="sousuo" @input="sousuoInput" placeholder="搜索门店"
						placeholder-style="color: #A3A3A3;" />
				</view>
			</view>
		</view>
		<view v-if="gasstation" class="wid90 mar borRad20 bacFFF mar-top40" style="padding: 30rpx 0;border: 4rpx solid #37BCC3;">
			<view class="wid90 mar dis disAl" style="justify-content: flex-end;color: #37BCC3;">
				<uni-icons type="paperplane-filled" color="#37BCC3" size="30rpx"></uni-icons>
				<view class="foSi30 mar-left10 fowe600">{{gasstation.distance}}km</view>
			</view>
			<view class="wid90 mar dis disJuB" style="align-items: flex-end;">
				<view class="wid80" style="color: #37BCC3;">
					<view class="foSi35 fowe800">{{gasstation.name}}</view>
					<view class="mar-top20 foSi20 fowe600">{{gasstation.address}}</view>
				</view>
				<view>
					<uni-icons type="right" color="#37BCC3" size="40rpx"></uni-icons>
					<view style="height: 10rpx;"></view>
				</view>
			</view>
			<view class="hei20"></view>
		</view>
		<scroll-view style="height: calc(100vh - 362rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 60rpx;"></view>
			<view class="wid90 mar fowe800 foSi40">其他门店</view>
			<view style="height: 10rpx;"></view>
			<block v-for="(item,index) in list" :key="index">
				<view v-if="item.id != id" class="wid90 mar borRad20 bacFFF mar-top30" @click="xuanzeClick(item)"
					style="padding: 30rpx 0;border: 4rpx solid #000;">
					<view class="wid90 mar dis disAl" style="justify-content: flex-end;">
						<uni-icons type="paperplane-filled" size="30rpx"></uni-icons>
						<view class="foSi30 mar-left10 fowe600">{{item.distance}}km</view>
					</view>
					<view class="wid90 mar dis disJuB" style="align-items: flex-end;">
						<view class="wid80">
							<view class="foSi35 fowe800">{{item.name}}</view>
							<view class="mar-top20 foSi20 fowe600">{{item.address}}</view>
						</view>
						<view>
							<uni-icons type="right" size="40rpx"></uni-icons>
							<view style="height: 10rpx;"></view>
						</view>
					</view>
					<view class="hei20"></view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
		<t-index-address v-if="xuanze" class="wh100 poFix bacFFF" style="top: 0;z-index: 100;"
			@select="select"></t-index-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				last_page: 0,
				page: 1,
				list: [],
				gasstation: '',
				id: '',
				sousuo: '',
				xuanze: false,
				city: '长春'
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			console.log(option.id)
			if (option.id) {
				this.id = option.id
			}
			if(!uni.getStorageSync('city')){
				this.getAddress()
			}else{
				this.city = uni.getStorageSync('city')
				this.getLocation()
			}
		},
		methods: {
			getAddress(){
				var that = this
				var latitude = uni.getStorageSync('location_x')
				var longitude = uni.getStorageSync('location_y')
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${encodeURIComponent(latitude)},${encodeURIComponent(longitude)}&key=4DGBZ-YXX6Q-XWQ5S-BDFK2-T3DOS-R5FLJ&get_poi=1`,
					method: 'GET',
					success: (res) => {
						console.log(res)
						that.city = res.data.result.ad_info.city
						uni.setStorageSync('city',that.city)
						that.getLocation()
					}
				})
			},
			opte() {
				this.xuanze = true
			},
			select(data) {
				console.log(data)
				this.city = data.name
				uni.setStorageSync('city',this.city)
				this.xuanze = false
				this.page = 1
				this.getLocation()
			},
			sousuoInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sousuo = event.target.value
					that.page = 1
					that.getLocation()
					console.log(that.sousuo)
				}, 1000)
			},
			getLocation() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res)
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											console.log(res)
											uni.setStorageSync('location_y', res.longitude
												.toFixed(6))
											uni.setStorageSync('location_x', res.latitude
												.toFixed(6))
											that.getList()
										},
										fail(error) {
											console.log('失败', error)
										}
									})
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)
									that.getList()
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									uni.setStorageSync('location_y', res.longitude.toFixed(6))
									uni.setStorageSync('location_x', res.latitude.toFixed(6))
									that.getList()
								},
								fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error)
									that.getList()
								}
							})
						}
					}
				})
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
					},
					data: {
						location_y: uni.getStorageSync('location_y') ? uni.getStorageSync('location_y') :
							'104.480609',
						location_x: uni.getStorageSync('location_x') ? uni.getStorageSync('location_x') :
							'36.305564',
						page: that.page,
						limit: 10,
						id: that.id,
						city: that.city,
						search: that.sousuo
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							console.log(uni.getStorageSync('jiaId'));
							if (uni.getStorageSync('jiaId')) {
								that.last_page = result.data.list.last_page
								if(that.page == 1){
									that.list = result.data.list.data
								}else{
									that.list = that.list.concat(result.data.list.data)
								}
								that.gasstation = result.data.gasstation
							} else {
								uni.setStorageSync('jiaId', result.data.data[0].id)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			xuanzeClick(item) {
				uni.setStorageSync('jiaId', item.id)
				uni.navigateBack(1)
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
</style>